<template>
  <div class="homework-container">
    <h1>作业管理</h1>
    
    <div class="user-info">
      <p>欢迎，{{ userProfile.fullName }}老师</p>
      <router-link to="/teacher/dashboard">返回Dashboard</router-link>
    </div>

    <div class="tabs">
      <button 
        :class="{ active: activeTab === 'assign' }" 
        @click="activeTab = 'assign'"
      >
        发布作业
      </button>
      <button 
        :class="{ active: activeTab === 'view' }" 
        @click="activeTab = 'view'"
      >
        查看作业
      </button>
    </div>

    <!-- 发布作业组件 -->
    <div v-show="activeTab === 'assign'" class="tab-content">
      <AssignHomework />
    </div>

    <!-- 查看作业组件 -->
    <div v-show="activeTab === 'view'" class="tab-content">
      <ViewHomework />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import AssignHomework from './AssignHomework.vue';
import ViewHomework from './ViewHomework.vue';

export default {
  name: 'HomeworkManagement',
  components: {
    AssignHomework,
    ViewHomework
  },
  setup() {
    const userProfile = ref({});
    const activeTab = ref('assign'); // 默认显示发布作业标签

    // 获取用户信息
    const loadUserProfile = async () => {
      try {
        const response = await fetch('/user/profile', {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-cache'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          userProfile.value = result.data;
        }
      } catch (err) {
        console.error('获取用户信息失败:', err);
      }
    };

    onMounted(() => {
      loadUserProfile();
    });

    return {
      userProfile,
      activeTab
    };
  }
};
</script>

<style scoped>
.homework-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.homework-container h1 {
  text-align: center;
  color: #333;
}

.user-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info a {
  color: #409EFF;
  text-decoration: none;
}

.user-info a:hover {
  text-decoration: underline;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.tabs button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  margin-right: 5px;
}

.tabs button.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
  font-weight: bold;
}

.tabs button:hover:not(.active) {
  background-color: #e0e0e0;
}

.tab-content {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0 5px 5px 5px;
  padding: 20px;
  min-height: 400px;
}
</style>